<script setup lang="ts">
import {createApp, h} from "vue";
import VueJsonPretty from "vue-json-pretty";
import {Image} from "@arco-design/web-vue";
import {nextTick, watch} from "vue";
import 'vue-json-pretty/lib/styles.css';

interface Props {
  visible: boolean
  content: string
}

const props = defineProps<Props>()
const emits = defineEmits(["update:visible"])

function cancel() {
  emits("update:visible", false)
}

function jsonPretty() {
  const jsonBodyList = document.querySelectorAll(".json_body")
  jsonBodyList.forEach((ele) => {
    const jsonBody = (ele as HTMLDivElement).innerText
    let data = {}
    try {
      data = JSON.parse(jsonBody)
    } catch (e) {
      console.log(e)
      return
    }
    // 生成虚拟dom
    const vNode = h(VueJsonPretty, {data: data}, [])
    // 创建app
    const app = createApp({
      render: () => vNode
    })
    // 挂载到对应的element上
    app.mount(ele)
  })
}

function imagePretty() {
  const imgBodyList = document.querySelectorAll(".image_show img")
  imgBodyList.forEach((ele) => {
    const src = (ele as HTMLImageElement).src
    // 生成虚拟dom
    const vNode = h(Image, {src: src}, [])
    // 创建app
    const app = createApp({
      render: () => vNode
    })
    // 挂载到它的父级上
    app.mount(ele.parentElement as HTMLDivElement)
  })
}

watch(() => props.content, () => {
  nextTick(() => {
    jsonPretty()
    imagePretty()
  })
})


</script>

<template>
  <a-modal body-class="f_log_detail_body scrollbar" @cancel="cancel" width="40%" :footer="false" :visible="visible" title="日志详情">
    <div class="f_log_detail" v-html="props.content"></div>
  </a-modal>
</template>

<style lang="less">
.level_minxin(@level:"info", @color:rgb(var(--blue-6))) {
  &::before {
    content: @level;
    position: absolute;
    z-index: 1;
    right: 10px;
    top: 10px;
    color: @color;
    font-size: 12px;
  }
}

.log_bg_minxin() {
  padding: 20px;
  background-color: var(--color-fill-2);
  border-radius: 5px;
}
.f_log_detail_body{
  max-height: 70vh;
}

.f_log_detail {
  > div {
    margin-bottom: 10px;
    position: relative;
  }

  .log_item {
    .log_bg_minxin();
    display: flex;

    .label {
      flex-shrink: 1;
      font-weight: 600;

      &::after {
        content: ":";
        display: inline-block;
      }
    }

    .value {
      margin-left: 10px;
    }

    &.info {
      .level_minxin("info", rgb(var(--blue-6)));
    }

    &.warn {
      .level_minxin("warn", rgb(var(--orange-6)));
    }

    &.error {
      .level_minxin("error", rgb(var(--red-6)));
    }
  }

  .log_response {
    .log_bg_minxin();
    word-break: break-word;

    .level_minxin("响应");

  }

  .log_request {
    .log_bg_minxin();
    word-break: break-word;

    .level_minxin("请求");

    .request_head {
      display: flex;

      .path {
        margin-left: 10px;
      }
    }
  }

  .log_link {
    .log_bg_minxin();
    .level_minxin("链接");
  }

  .log_image {
    .log_bg_minxin();
    .level_minxin("图片");

    .image_info {
      display: flex;

      .size {
        margin-left: 10px;
      }
    }

    .image_show {
      margin-top: 10px;

      img {
        max-width: 100%;
        object-fit: cover;
        max-height: 100px;
      }
    }
  }
}
</style>